<!--
 *
 * @author 凡墙<jihaoju@qq.com>
 * @date 2019/11/12
 * @description
 -->
<template>
  <section>
    <van-sticky>
      <div class="sticky-wrapper">
        <div class="flex row nav-wrapper">
          <div class="flex flex-1 flex-row flex-bottom pl20">
            <a class="current mr20">缘分</a>
            <a class="">推荐</a>
          </div>

          <div class="flex flex-row flex-center flex-right pr20">
            <a class="">筛选</a>
            <i class="iconfont icon-shaixuan" />
          </div>
        </div>

        <div class="flex flex-row flex-center bg-color-white pt10 pb10 search-options">
          <div class="flex flex-row flex-center flex-1" @click="showOrderActionsheet=true">
            {{orderStr}}
            <i class="iconfont icon-xiangxia" />
          </div>

          <div class="flex flex-row flex-center flex-1" @click="showAgeActionsheet=true">
            {{ageStr}}
            <i class="iconfont icon-xiangxia" />
          </div>

          <div class="flex flex-row flex-center flex-1" @click="showRegionPopup=true">
            <i class="iconfont icon-location" />
            {{locationStr}}
          </div>
        </div>
      </div>
    </van-sticky>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="requestData">
      <div class="member-list">
        <router-link
          :to="{ name: 'MemberProfile', params: { id: item.member.id }}"
          v-for="(item, index) in dataList"
          :key="index">
          <dl class="member-item">
            <dt class="member-photo">
              <img :src="item.member.photo" />
              <h3>{{item.user.nick}}</h3>
            </dt>
            <dd class="member-info">
              <p class="text-center"><span v-if="item.member.age>0">{{item.member.age}}岁</span><span v-if="item.member.live_city_str"> · {{item.member.live_city_str}}</span><span v-if="item.member.height>0"> · {{item.member.height}}cm</span></p>
              <p class="text-center" v-if="item.member.house_status>0 || item.member.car_status>0 || item.member.job>0"><span v-if="item.member.house_status==20" class="mr5">有房</span><span v-if="item.member.car_status==20" class="mr5">有车</span><span v-if="item.member.job>0" class="mr5">{{item.member.job_str}}</span></p>
            </dd>
          </dl>
        </router-link>
      </div>
    </van-list>

    <van-action-sheet v-model="showOrderActionsheet" :actions="orderActions" @select="onOrderActionSelect" />
    <van-action-sheet v-model="showAgeActionsheet" :actions="ageActions" @select="onAgeActionSelect" />

    <van-popup v-model="showRegionPopup" round position="bottom">
      <van-cascader
        v-model="selectedRegions"
        title="请选择所在地区"
        :options="provinceList"
        @close="showRegionPopup = false"
        @change="onRegionCascaderChange"
        @finish="onRegionCascaderFinish"
      />
    </van-popup>

    <Tabbar active="home"/>
  </section>
</template>
<script>
  import Vue from 'vue';
  import {Toast, Row, Col, Icon, Sticky, ActionSheet, List, Cascader, Popup} from 'vant';

  Vue.use(Toast).use(Row).use(Col).use(Icon).use(Sticky).use(ActionSheet).use(List).use(Cascader).use(Popup);
  import Tabbar from './componets/Tabbar';

  import {memberListsUri, regionChildrenUri} from '../common/api';

  export default {
    components: {
      [Toast.name]: Toast,
      [Row.name]: Row,
      [Col.name]: Col,
      [Icon.name]: Icon,
      [Sticky.name]: Sticky,
      [ActionSheet.name]: ActionSheet,
      [List.name]: List,
      [Cascader.name]: Cascader,
      [Popup.name]: Popup,
      Tabbar: Tabbar
    },
    data() {
      return {
        showOrderActionsheet: false,
        orderActions: [
          {name: '最新注册', order: 10},
          {name: '最近登录', order: 20},
          {name: '人气最高', order: 30},
          {name: '认证最多', order: 40}
        ],
        showAgeActionsheet: false,
        ageActions: [
          {name: '不限', min: 0, max: 0},
          {name: '18-25岁', min: 18, max: 25},
          {name: '26-30岁', min: 26, max: 30},
          {name: '31-40岁', min: 31, max: 40},
          {name: '41-50岁', min: 41, max: 50},
          {name: '50岁以上', min: 51, max: 0},
        ],
        showRegionPopup: false,
        selectedRegions: '',

        searchForm: {order: 10, minAge: 0, maxAge: 0, liveProvince: 0, liveCity: 0},

        provinceList: [],
        cityList: [],

        currentPage: 1,
        lastPage: 0,
        total: 0,
        pageSize: 10,
        loading: false,
        finished: false,
        dataList: [],

        orderStr: '排序',
        ageStr: '年龄',
        locationStr: '所在地'
      }
    },
    methods: {
      onOrderActionSelect(item) {
        this.orderStr = item.name;
        this.searchForm.order = item.order;
        this.showOrderActionsheet = false;
        this.search();
      },
      onAgeActionSelect(item) {
        this.ageStr = item.name;
        this.searchForm.minAge = item.min;
        this.searchForm.maxAge = item.max;
        this.showAgeActionsheet = false;
        this.search();
      },
      onRegionCascaderChange(option) {
        const tabIndex = option.tabIndex;
        const value = option.value;
        if(tabIndex == 0) {
          if(value > 0) {
            const provinceList = this.provinceList;
            let provinceIndex = 0;
            for (let i = 0; i < provinceList.length; i++) {
              if(value == provinceList[i].value) {
                provinceIndex = i;
                break;
              }
            }
            this.getRegions(value, (regions) => {
              let children = [];
              children.push({
                text: '不限',
                value: 0
              });
              for (let i = 0; i < regions.length; i++) {
                children.push({
                  text: regions[i].region_name,
                  value: regions[i].region_id
                })
              }
              let province = provinceList[provinceIndex];
              province.children = children;
              this.$set(provinceList, provinceIndex, province);
            })
          } else {
            let children = [];
            children.push({
              text: '不限',
              value: 0
            });
            const provinceList = this.provinceList;
            let provinceIndex = 0;
            let province = provinceList[provinceIndex];
            province.children = children;
            this.$set(provinceList, provinceIndex, province);
          }
        }
      },
      onRegionCascaderFinish({ selectedOptions }) {
        this.locationStr = selectedOptions[0].text + '-' + selectedOptions[1].text;
        this.searchForm.liveProvince = selectedOptions[0].value;
        this.searchForm.liveCity = selectedOptions[1].value;
        this.showRegionPopup = false;
        this.search();
      },
      search() {
        this.currentPage = 1;
        this.lastPage = 0;
        this.total = 0;
        this.loading = false;
        this.finished = false;
        this.dataList = [];
        this.requestData();
      },
      requestData() {
        const that = this;
        this.loading = true;
        const url = memberListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage + '&order=' + this.searchForm.order
                  + '&min_age=' + this.searchForm.minAge + '&max_age=' + this.searchForm.maxAge + '&live_province=' + this.searchForm.liveProvince
                  + '&live_city=' + this.searchForm.liveCity;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            that.loading = false;
            if (that.currentPage >= data.last_page) {
              that.finished = true;
            }
            that.currentPage = that.currentPage + 1;
            for (let i = 0; i < data.data.length; i++) {
              that.dataList.push(data.data[i]);
            }
            that.total = data.total;
            that.lastPage = data.last_page;
          }
        }, response => {
          // error callback
        })
      },
      getRegions(parentId, callback) {
        const that = this;
        const url = regionChildrenUri + '?parent_id=' + parentId;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            callback(data.regions);
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      this.getRegions(1, (regions) => {
        let provinceList = [];
        provinceList.push({
          text: '不限',
          value: 0,
          children: []
        });
        for (let i = 0; i < regions.length; i++) {
          provinceList.push({
            text: regions[i].region_name,
            value: regions[i].region_id,
            children: []
          })
        }
        this.provinceList = provinceList;
      })
    }
  }
</script>

<style scoped>
  .nav-wrapper {
    background: #6600CC;
    color: #FFFFFF;
    padding: 15px 0;
    font-size: 14px;
  }
  .nav-wrapper .current {
    font-size: 18px;
    font-weight: bold;
  }

  .member-list a{
    color: #666666;
    text-decoration: none;
  }
  .member-item {
    margin-left: 3%;
    margin-right: 3%;
    width: 44%;
    border-radius: 6px;
    background: #ffffff;
    margin-bottom: 10px;
    float: left;
  }
  /*.member-item:nth-child(even) {*/
  /*  margin-left: 3%;*/
  /*}*/
  /*.member-item:nth-child(odd) {*/
  /*  margin-right: 3%;*/
  /*}*/
  .member-photo {
    position: relative;
    width: 100%;
    height: 0rem;
    padding-bottom: 123%;
  }
  .member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .member-photo h3 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #ffffff;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    position: absolute;
    padding: 0 10px;
  }
  .member-info {
    padding: 0 0;
    margin: 0 0;
  }
  .member-info p {
    font-size: 12px;
    padding: 5px 0;
    margin: 0 0 ;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
